<template>
  <div id="app">
    <h1>教程</h1>
    <ul>
      <li>
        基础
        <ol>
          <installation />
          <introduction />
          <instance />
          <syntax />
          <computed />
          <class-and-style />
          <conditional />
          <list />
          <events />
          <forms />
          <component-basics />
        </ol>
      </li>
      <li>
        深入了解组件
        <ol>
          <register />
          <prop />
          <custom-event />
          <slots />
        </ol>
      </li>
      <li>过渡&amp;动画</li>
      <li>可复用性&amp;组合</li>
      <li>工具</li>
      <li>规模化</li>
      <li>内在</li>
      <li>迁移</li>
      <li>更多</li>
    </ul>
  </div>
</template>

<script>
// 引入基础组件
import Installation from "./components/basics/Installation";
import Introduction from "./components/basics/Introduction";
import Instance from "./components/basics/Instance";
import Syntax from "./components/basics/Syntax";
import Computed from "./components/basics/Computed";
import ClassAndStyle from "./components/basics/ClassAndStyle";
import Conditional from "./components/basics/Conditional";
import List from "./components/basics/List";
import Events from "./components/basics/Events";
import Forms from "./components/basics/Forms";
import ComponentBasics from "./components/basics/ComponentBasics";
// 引入深入了解组件组件
import Register from "./components/deep-component/Register";
import Prop from "./components/deep-component/Prop";
import CustomEvent from "./components/deep-component/CustomEvent";
import Slots from "./components/deep-component/Slots";

export default {
  name: "app",
  components: {
    // 局部注册基础组件
    Installation,
    Introduction,
    Instance,
    Syntax,
    Computed,
    ClassAndStyle,
    Conditional,
    List,
    Events,
    Forms,
    ComponentBasics,
    // 局部注册深入了解组件组件
    Register,
    Prop,
    CustomEvent,
    Slots
  }
};
</script>

<style>
section {
  margin: 12px 0;
  padding: 12px;
  width: 600px;
  border-radius: 6px;
  border: thin solid lightgray;
  background-color: #f8f8f8;
}
</style>